<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/user.css"/>
    <link rel="stylesheet" type="text/css" href="../css/vm.extend.css"/>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/min.js"></script>
    <script type="text/javascript" src="../script/jq.min.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <!--<script type="text/javascript" src="../script/vm.jq2.1.4.mini.js"></script>-->
</head>
<body class="new_personal_center">
<div id="cont">
    <header>
        <section class="vm-flex-y">
            <figure>
                <img src="../image/touxiang01.jpg"/>
                <hgroup>{{list.name}}</hgroup>
                <span>{{list.tel}}</span>
            </figure>
        </section>
        <canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>
    </header>
    <article>
        <section>
            <ul class="vm-fy-com-list list">
                <li class="vm-flex-y">
                    <div class="vm-flex-y">
                        <img src="../image/geren_04.png"/>
                        <span>我的地址</span>
                    </div>
                    <dfn>{{list.addre}}</dfn>
                </li>
                <li class="vm-flex-y activity waves-effect" onclick="go_order()">
                    <div class="vm-flex-y">
                        <img src="../image/geren_03.png"/>
                        <span>我的订单</span>
                    </div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unfold"></use>
                    </svg>
                </li>
                <li class="vm-flex-y activity waves-effect" onclick="go_shuoming()">
                    <div class="vm-flex-y">
                        <img src="../image/tousu-jianyi.png"/>
                        <span>说明</span>
                    </div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unfold"></use>
                    </svg>
                </li>
                <li class="vm-flex-y activity waves-effect" onclick="go_tuichu()">
                    <div class="vm-flex-y">
                        <img src="../image/del-address.png"/>
                        <span>退出登录</span>
                    </div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unfold"></use>
                    </svg>
                </li>
            </ul>

        </section>
    </article>
</div>
<script type="text/javascript">
    var data_list = "";
    var deviceId = "";
    apiready = function () {
        vm = new Vue({
            el: '#cont',
            data: {
                list: []
            }
        });
        deviceId = api.deviceId;//设备编码
        get_data(deviceId);
    };

    function go_tuichu() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "http://www.solearn.top/paotui/public/index.php/index/index/go_tuichu",
            data: {dev: deviceId},
            success: function (data) {
                if (data.status == 1) {
                    var headerH = 0;
                    var frameH = api.winHeight - headerH;
                    api.openFrame({
                        name: 'login',
                        url: '../html/login.html',
                        bounces: false,  //上下滑动
                        scrollEnabled: true,
                        rect: {
                            x: 0,
                            y: headerH,
                            w: 'auto',
                            h: frameH
                        }
                    });
                }
            }
        });
    }


    function get_data(deviceId) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "http://www.solearn.top/paotui/public/index.php/index/index/get_user_data",
            data: {dev: deviceId},
            success: function (data) {
                var pro = data.result;
                vm.list = pro;
            }
        });
    }

    function go_order() {
        api.openFrame({
            name: 'order_list',
            url: '../html/order_list.html',
            bounces: false,
            rect: {
                x: 0,
                w: 'auto'
            }
        });
    }

    function go_shuoming() {
        api.openFrame({
            name: 'shuoming',
            url: '../html/shuoming.html',
            bounces: false,
            rect: {
                x: 0,
                w: 'auto'
            }
        });
    }


    //波浪点击

    /*如果没有销售额执行下面这句*/
    //			$("#lis").html('<img src="__PUBLIC__/img/biaoqing.jpg"/>');


    //波浪
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = canvas.parentNode.offsetWidth;
    canvas.height = canvas.parentNode.offsetHeight;
    //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    // 波浪大小
    var boHeight = canvas.height / 8;
    var posHeight = canvas.height / 1.4;
    //初始角度为0
    var step = 0;
    //定义三条不同波浪的颜色
    var lines = ["rgba(255,255,255, 1)",
        "rgba(255,255,255, 0.5)",
        "rgba(255,255,255, 0.2)"
    ];

    function loop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        step++;
        //画3个不同颜色的矩形
        for (var j = lines.length - 1; j >= 0; j--) {
            ctx.fillStyle = lines[j];
            //每个矩形的角度都不同，每个之间相差45度
            var angle = (step + j * 50) * Math.PI / 180;
            var deltaHeight = Math.sin(angle) * boHeight;
            var deltaHeightRight = Math.cos(angle) * boHeight;
            ctx.beginPath();
            ctx.moveTo(0, posHeight + deltaHeight);
            ctx.bezierCurveTo(canvas.width / 2, posHeight + deltaHeight - boHeight, canvas.width / 2, posHeight + deltaHeightRight - boHeight, canvas.width, posHeight + deltaHeightRight);
            ctx.lineTo(canvas.width, canvas.height);
            ctx.lineTo(0, canvas.height);
            ctx.lineTo(0, posHeight + deltaHeight);
            ctx.closePath();
            ctx.fill();
        }
        requestAnimFrame(loop);
    }

    loop();


</script>
</body>
</html>
